<template>
  <div id="print">
    <div
      v-for="(item, index) in data"
      :key="index"
      style="page-break-after:always"
    >
      <div
        style="border-bottom: 1px solid;font-size: 20px; font-weight: bold; text-align: center; overflow-wrap: break-word; color: rgba(0, 0, 0, 0.95);"
      >
        递送单
      </div>
      <!-- 详情 -->
      <el-row style="line-height: 1.5;">
        <el-col
          :span="12"
          style="padding-left: 19%;color:#000000f2;font-size: 15px;"
        >
          <span>寄出批号：</span>
          <span>{{ item.sampleExpress.deliveryId }}</span>
        </el-col>
        <el-col
          :span="12"
          style="padding-left: 10%;color:#000000f2;font-size: 15px;"
        >
          <span>寄出日期：</span>
          <span>{{ item.sampleExpress.deliveryTime }}</span>
        </el-col>
        <el-col
          :span="12"
          style="padding-left: 19%;color:#000000f2;font-size: 15px;"
        >
          <span>寄出人员：</span>
          <span>{{ item.sampleExpress.deliveryMan }}</span>
        </el-col>
        <el-col
          :span="12"
          style="padding-left: 10%;color:#000000f2;font-size: 15px;"
        >
          <span>寄出方式：</span>
          <span>{{
            item.sampleExpress.deliveryWay
              ? item.sampleExpress.deliveryWay.data
              : ""
          }}</span>
        </el-col>
        <el-col
          :span="12"
          style="padding-left: 19%;color:#000000f2;font-size: 15px;"
        >
          <span>快递人员：</span>
          <span>{{ item.sampleExpress.courier }}</span>
        </el-col>
        <el-col
          :span="12"
          style="padding-left: 10%;color:#000000f2;font-size: 15px;"
        >
          <span>快递批号：</span>
          <span>{{ item.sampleExpress.courierNum }}</span>
        </el-col>
        <el-col
          :span="12"
          style="padding-left: 19%;color:#000000f2;font-size: 15px;"
        >
          <span>验收部门：</span>
          <span>{{
            item.sampleExpress.receiveDepart
              ? item.sampleExpress.receiveDepart.data
              : ""
          }}</span>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row style="line-height: 1.5;border-bottom:1px solid">
        <el-col
          :span="1"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
        >
          &nbsp</el-col
        >
        <el-col
          <el-col
          :span="5"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >条形码号</el-col
        >
        <el-col
          :span="3"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >母亲姓名</el-col
        >
        <el-col
          :span="3"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >性别</el-col
        >
        <el-col
          :span="4"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >婴儿体重</el-col
        >
        <el-col
          :span="4"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >出生日期</el-col
        >
        <el-col
          :span="4"
          style="padding-left:5px;color:#000000f2;font-size: 15px;"
        >
          所属医院</el-col
        >
      </el-row>
      <!-- 表格内容 -->
      <el-row style="line-height: 1.5;border-bottom:1px solid">
        <div v-for="(i, n) in item.list" :key="n">
          <el-col
            :span="1"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ n + 1 }}&nbsp
          </el-col>
          <el-col
            <el-col
            :span="5"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ i.barCode }}&nbsp
          </el-col>
          <el-col
            :span="3"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ i.momName }}&nbsp
          </el-col>
          <el-col
            :span="3"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ i.babySex ? i.babySex.data : "" }}&nbsp
          </el-col>
          <el-col
            :span="4"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ i.weight }}&nbsp
          </el-col>
          <el-col
            :span="4"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ i.birthTime }}&nbsp
          </el-col>
          <el-col
            :span="4"
            style="padding-left:5px;color:#000000f2;font-size: 15px;"
          >
            {{ i.hospitalId.data ? i.hospitalId.data.label : "" }}&nbsp
          </el-col>
        </div>
      </el-row>
      <!-- 签字 -->
      <el-row style="line-height: 2.5;">
        <el-col
          :span="12"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 15px;"
        >
          <span>总数：</span>
          <span>{{ item.list.length }}&nbsp</span>
        </el-col>
        <el-col
          :span="12"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 15px;"
        >
          <span>管理签名：</span>
          <span>&nbsp</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      printStatus: false
    };
  },
  mounted() {
    console.log(this.data);
  }
};
</script>

<style>
body {
  margin: 0;
  height: 100%;
}
</style>
